/*基金-基金分红页面 path: '/funddivide'*/
/*基金搜索接口,认购期判断，弹框,分红方式提交*/
<template>
  <div class="fund-divide common-fun-trade">
    <header-top :option="headerOption"></header-top>

  <div class="fund-divide-fix">
    <div class="fund-divide-content">

        <div class="fund-divide-item">
          <span class="fund-divide-title"></span><span class="fund-divide-name">基金代码</span>
          <div class="fund-divide-search">
            <input v-focus="showSearch" @input="beginSearch" id="input-ofcode" v-model="inputOfcode" placeholder=" 请输入基金简拼/基金代码" class="fund-divide-text" type="text">
            <i class="iconfont icon-qingkong cancel" @click="clearInputOfcode" v-show="inputOfcode != ''"></i>
          </div>
        </div>

        <div class="fund-divide-item" v-if="fundcode!=''">
          <span class="fund-divide-title"></span><span class="fund-divide-name">基金名称</span>
          <div class="fund-divide-name-value">{{fundname+"  "+ fundcode}}</div>
        </div>

        <div class="fund-divide-item">
          <span class="fund-divide-title"></span><span class="fund-divide-name">分红方式</span>
              <popup-picker v-if="ofstatue!=1"  class="fund-divide-date-wrap" :data="bonusType.data" v-on:change="onBonusTypeChange" :value='bonusType.value' @onScroll='onBonusTypeChange'>
                  <span   class="init-money_value-wrap_value">{{bonusType.data[0][bonusType.index].name}}</span>
                  <i class="iconfont">&#xe62d;</i>
              </popup-picker>
              <div class="SelectControl"  v-if="ofstatue==1"  >
                  <input readonly="readonly" unselectable="on" disabled="disabled" value="现金分红"/>
                  <i class="iconfont">&#xe62d;</i>
              </div>
              <div class="fund-divide-lot">可赎回份额 {{lotnum}}</div>
          </div>
      </div>
      <div v-if="debug" v-text="test"></div>
      <div class="fund-divide-buttom"><div class="fund-divide-button" @click="submitFundDivide">确认</div>
    </div>
     </div>
      <div class="under" >
          <my-position  @chooseFund="chooseFund"></my-position>
      </div>


 <search-list v-show="showSearch" :searchList="searchList" @chooseFund="chooseSearchFund" @closeLayer="cancelSearch"></search-list>
  <fund-divide-notset-modal></fund-divide-notset-modal>
  <fund-divide-setsucc-modal></fund-divide-setsucc-modal>
  </div>
</template>

<script>
  import HeaderTop from 'components/HeaderTop'
  import Constant from 'common/constant'
  import PopupPicker from 'components/popup-picker'
  import RemoteDAO from 'common/remoteDAO'
  import LocalDAO from 'common/localDAO'
  import CommonUtil from 'common/common.util'
  import FundDivideNotsetModal from 'components/modal/fund/FundDivideNotsetModal'
  import FundDivideSetsuccModal from 'components/modal/fund/FundDivideSetsuccModal'
  import MyPosition from 'components/fund/MyPosition'
  import SearchList from 'components/fund/SearchList'

  export default {
    data () {
      return {
        test:"",
        isClick:false,
        debug:true,
        showSearch:false,
        inputOfcode:'',
        fundname:'',
        lotnum:'',
        fundcode:'',
        userCode:"",
        ofstatue:1,
        searchList:[],
        entrustBs: 3, //委托类型: 2基金认购 3基金申购,
        myPosition: [],
        retry: false,//是否显示基金持仓报错后的点击重试
        errorPosition: '数据加载中...',//持仓报错、提示信息
        headerOption: {
          title: '分红方式',
          leftBtn: Constant.leftBtn.BACK,
          operations: [],
        },
        bonusType:{
          data:[
            [{name:'红利转投',value:'1'},{name:'现金分红',value:'2'}]
          ],
          index:1,
          value:['2']
        }
      }
    },
    components: {
      HeaderTop,
      SearchList,
      'popup-picker':PopupPicker,
      'fund-divide-notset-modal':FundDivideNotsetModal,
      'fund-divide-setsucc-modal':FundDivideSetsuccModal,
      MyPosition,
    },
    created(){
        this.userCode=LocalDAO.getUserCode();//'49205';//41667
    },
    methods:{
      chooseSearchFund(item,from){
        this.onItem(item);
      },
       //点击持仓基金
      chooseFund(item){
          this.onItem(item);
      },
       beginSearch(){
          if(this.inputOfcode!=''){
            this.showSearch = true;
           RemoteDAO.fundSearch(this.inputOfcode,response=>{
              //this.test=JSON.stringify(response);
              if(response.data.body.length>0)
              this.searchList=CommonUtil.translateFundsStatus(response.data.body);
           });
         }
        },
       clearInputOfcode(){
        this.inputOfcode = '';
        this.cancelSearch();
       },
       cancelSearch(){
        this.showSearch = false;
        this.searchList = [];
      },
        onBonusTypeChange(val) {
            let index = this.getIndexOf(this.bonusType.data[0],val);
            this.bonusType.index = index;
            this.bonusType.value[0] = val;
        },
        getIndexOf: function (arr,item) {
          for (let i = 0; i < arr.length; i++) {
            if (arr[i].value == item) {
              return i;
            }
          }
          return -1;
        },
        onItem(item){
          this.fundname=item.ofname;
          this.fundcode=item.ofcode;
          this.inputOfcode=item.ofcode;
          //获取可赎回份额
          let param={
                client_id:this.userCode,
                ofcode:item.ofcode,
                entrust_bs:4,
                entrust_type:1,
                entrust_typeid:"",
            };
            RemoteDAO.callJCL11169(param,response=>{
                //this.test= JSON.stringify(response);
                if(response.error=="0"){
                    if(response.data.body.enable_vol!=undefined)
                      this.lotnum= CommonUtil.toFixed(response.data.body.enable_vol,2);
                    else
                      this.lotnum=0;
                }else{
                    this.$store.dispatch('setTip',{text:"11169:"+response.data});
                }
            });

          let params={
                client_id:this.userCode,
                ofcode:item.ofcode,
                start:0,
                limit:20,
          }
          //查询开放式基金的具体信息
          RemoteDAO.callJCL11165(params,response=>{
               //this.test= JSON.stringify(response);
               if(response.error=="0"){
                  //认购期判断,选择某个基金后认购期间分红方式不能修改。
                  let record=response.data.body.records;
                  if (record.length > 0) {
                      this.ofstatue=record[0].ofstatue;
                      if(this.ofstatue==1){
                          this.$store.dispatch('setModal',{visible:true,modalId:Constant.modal.FUND_DIVIDE_NOTSET_MODAL});
                      }
                  }else{
                    this.$store.dispatch('setTip',{text:"未查到该基金的具体信息."});
                  }
               }else{
                   this.$store.dispatch('setTip',{text:"11165:"+response.data});
               }

                  this.cancelSearch();
          });

        },
        submitFundDivide(){
          let divideName=this.bonusType.data[0][this.bonusType.index].name;
          let ofname=this.fundname;
          let code=this.fundcode;
            if(code==""){
              this.$store.dispatch('setTip',{text:"请输入基金代码"});
              return;
            }
            //基金分红方式  callJCL11166
            var params={
                client_id:this.userCode,
                ofcode:code,
                dividmethod:this.bonusType.value[0]
              };
            //  this.test=JSON.stringify(params);
            if(this.isClick){
              this.$store.dispatch('setTip',{text:"正在提交,请稍候"});
              return;
            }
             this.isClick=true;
            RemoteDAO.callJCL11166(params,response=>{
                this.isClick=false;
               //this.test= JSON.stringify(response);
                if(response.error=="0"){
                    this.$store.dispatch('setModal',{visible:true,ofname:ofname,divideMethod:divideName,modalId:Constant.modal.FUND_DIVIDE_SETSUCC_MODAL});
                }else{
                    this.$store.dispatch('setTip',{text:response.data});
                }
            });
        },
      },
      directives:{
          focus:{
            inserted:function(el,{value}){
              if(value){
                el.focus();
              }
            }
          }
      }
  }
</script>

<style scoped>
.fund-divide-content{
    background: #fff;
    padding: 23px 10% 10px 10%;
  }

  .fund-divide-title{
    width: 3px;
    height: 12px;
    border-radius: 2px;
    height: 12px;
    margin-right: 4px;
    background: #33a7f1;
    display: inline-block;
  }

  .fund-divide-name{
    color:#565656;
    font-size: 15px;
  }

  .fund-divide-search{
      margin-top: 5px;
      width: 100%;
      height: 45px;
      border-radius:5px;
      border:1px solid #999999;
      vertical-align: middle;
      z-index: 1031;
      background: #FFFFFF;
      position: relative;
  }

  .fund-divide-text{
      width: 88%;
      border: 0;
      padding-left: 12px;
      height: 100%;
     vertical-align: middle;
     background: none;
  }

  .cancel{
    position: relative;
    font-size: 24px;
    z-index: 10;
    vertical-align: middle;
  }


  .fund-divide-name-value{
    line-height: 30px;
    margin-left: 8px;
    font-size: 15px;
  }

  .fund-divide-lot{
    line-height: 12px;
    color: #999999;
    font-size: 12px;
    padding:12px 0 0 8px;
  }

  .fund-divide-item{
    margin-bottom: 20px;
  }

  .fund-divide-button{
    border-radius:5px;
    background: #3f78e1;
    text-align: center;
    width: 75%;
    height: 36px;
    color: #ffffff;
    line-height: 35px;
    margin-left: 15%;
    font-size: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .fund-divide-buttom{
    width: 100%;
    padding: 30px 0 50px;
    border-top: 1px solid #e6e8e7;
  }


   .fund-divide-date-wrap{
      margin-left: 4px;
      color: #999999;
      border: solid 1px #D8D8D8;
      height: 32px;
      border-radius: 3px;
      display: inline-block;
      min-width: 109px;
      width: 70%;
  }

  .fund-divide-date-wrap i{
      color: white;
      font-size: 14px;
      border-radius: 2px;
      background-color: rgba(95, 170, 232, 1);
      float: right;
      padding: 8px 8px;
      height: 31px;
  }

  .fund-divide-date-wrap span{
     height: 30px;
     line-height: 31px;
     vertical-align: middle;
     padding-left: 10px;
     text-align: center;
  }

  .SelectControl {
    display: inline-block;
    border:1px solid #999999;
    border-radius:5px;
    vertical-align: middle;
     z-index: 15;
     width: 72%;
  }

  .SelectControl input{
    width: 80%;
    vertical-align: middle;
    padding-left: 10px;
    line-height: 31px;
    -webkit-tap-highlight-color:rgba(0,0,0,0);
    border:0;
    margin:0;
    outline: none;
    background:none;
    color:#000000;
  }

  .SelectControl i{
      color: white;
      font-size: 14px;
      border-radius: 2px;
      background-color: rgba(95, 170, 232, 1);
      vertical-align: middle;
      padding: 8px 8px;
      height: 31px;
      z-index: 1;
      float: right;
  }


   .fund-search{
    position: absolute;
    top:160px;
    z-index: 5;
    width: 100%;
  }
  .fund-search .list{
    text-indent: 12px;
    padding-right: 14px;
    font-size: 14px;
  }
  .fund-search-title{
    color:#565656;
    font-size: 14px;
    height: 52px;
    line-height: 52px;
    text-align: center;
    background: #F4F4F4;
  }

 #input-ofcode {
    z-index: 1031;
  }
  .under {
    position: absolute;
    left: 0;
    right: 0;
    top: 430px;
    bottom: 0;
    background: #fff;
  }
  .upper input{
    border: 1px solid #999999;
    border-radius: 5px;
    height: 45px;
    line-height: 45px;
    width: 80%;
    text-indent: 8px;
    color: #565656;
    margin-left: 10%;
    margin-bottom: 8px;
    position: relative;
    padding-right: 33px;
    -webkit-appearance: none;
  }

@media screen and (max-height: 640px){
  .under {
    position: static;
    height: 235px;
  }
}
</style>
